<template>
  <view class="activity-swiper">
    <view class="section-header">
      <text class="section-title">活动专场</text>
    </view>
    <swiper 
      class="swiper-container"
      :indicator-dots="false"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      circular
    >
      <swiper-item v-for="(item, index) in activityList" :key="index">
        <view class="activity-item" @click="onItemClick(item.id)">
          <image :src="item.image" mode="aspectFill"></image>
          <view class="item-info">
            <text class="item-title">{{ item.title }}</text>
            <view class="price-info">
              <text class="item-price">¥{{ item.price }}</text>
              <text class="original-price">¥{{ item.originalPrice }}</text>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    activityList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onItemClick(id) {
      this.$emit('item-click', id)
    }
  }
}
</script>

<style scoped>
.activity-swiper {
  width: 100%;
  margin-top: 10px;
  padding: 15px;
  background-color: #FFF;
}

.section-header {
  margin-bottom: 10px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.swiper-container {
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
}

.activity-item {
  width: 100%;
  height: 100%;
  position: relative;
}

image {
  width: 100%;
  height: 100%;
}

.item-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

.item-title {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #FFF;
  margin-bottom: 5px;
}

.price-info {
  display: flex;
  align-items: center;
}

.item-price {
  font-size: 16px;
  font-weight: bold;
  color: #FF4500;
  margin-right: 10px;
}

.original-price {
  font-size: 12px;
  color: #FFF;
  text-decoration: line-through;
}
</style>